import React from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';


const { Sider, Content } = Layout;

function System(props) {

    var navigate = useNavigate()
    var location = useLocation()


    const items = [
        { label: '实时数据', key: '/index/system/realtimedata', },
        {
            label: '历史数据', key: 'sub2', icon: <UserOutlined />, children: [
                { label: '总览', key: '/index/system/historydata' },
                { label: '坐席报表', key: '2' },
                { label: '留言报表', key: '3' },
            ]
        },
    ];

    return (
        <Layout className='system'>
            <Sider>
                <div className="title">在线系统</div>
                <Menu
                    mode="inline"
                    onClick={({ key }) => { navigate(key) }}
                    defaultSelectedKeys={[location.pathname]}
                    items={items}
                />
            </Sider>
            <Content>
                {/* 三级路由出口 */}
                <Outlet></Outlet>
            </Content>
        </Layout>
    );
}

export default System;